@keyframes fx-animation-tooltip {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fx-tooltip {
  position: fixed;
  z-index: 1000;
  height: fit-content;
  padding: $tooltip-padding-y $tooltip-padding-x;
  background-color: $tooltip-dark-background;
  color: $color-white;
  border-radius: $border-radius-default;
  border: 1px solid $tooltip-dark-background;
  animation: fx-animation-tooltip 0.3s ease-in-out;

  &.topLeft, &.top, &.topRight {
    > .fx-tooltip-trip {
      bottom: -4px;
      border-top-color: transparent !important;
      border-left-color: transparent !important;
    }
  }

  &.topLeft {
    transform: translateY(-100%);

    > .fx-tooltip-trip {
      left: $tooltip-padding-x;
    }
  }

  &.top {
    transform: translateX(-50%) translateY(-100%);

    > .fx-tooltip-trip {
      left: 50%;
      transform: translateX(-50%) rotate(45deg);
    }
  }

  &.topRight {
    transform: translateX(-100%) translateY(-100%);

    > .fx-tooltip-trip {
      right: $tooltip-padding-x;
    }
  }

  &.rightTop, &.right, &.rightBottom {
    > .fx-tooltip-trip {
      left: -4px;
      border-top-color: transparent !important;
      border-right-color: transparent !important;
    }
  }

  &.rightTop {
    > .fx-tooltip-trip {
      top: $tooltip-padding-y + 3;
    }
  }

  &.right {
    transform: translateY(-50%);

    > .fx-tooltip-trip {
      top: 50%;
      transform: translateY(-50%) rotate(45deg);
    }
  }

  &.rightBottom {
    transform: translateY(-100%);

    > .fx-tooltip-trip {
      bottom: $tooltip-padding-y + 3;
    }
  }

  &.leftTop, &.left, &.leftBottom {
    > .fx-tooltip-trip {
      right: -4px;
      border-bottom-color: transparent !important;
      border-left-color: transparent !important;
    }
  }

  &.leftTop {
    transform: translateX(-100%);

    > .fx-tooltip-trip {
      top: $tooltip-padding-y + 3;
    }
  }

  &.left {
    transform: translateX(-100%) translateY(-50%);

    > .fx-tooltip-trip {
      top: 50%;
      transform: translateY(-50%) rotate(45deg);
    }
  }

  &.leftBottom {
    transform: translateX(-100%) translateY(-100%);

    > .fx-tooltip-trip {
      bottom: $tooltip-padding-y + 3;
    }
  }

  &.bottomLeft, &.bottom, &.bottomRight {
    > .fx-tooltip-trip {
      top: -4px;
      border-bottom-color: transparent !important;
      border-right-color: transparent !important;
    }
  }

  &.bottomLeft {
    > .fx-tooltip-trip {
      left: $tooltip-padding-x;
    }
  }

  &.bottom {
    transform: translateX(-50%);

    > .fx-tooltip-trip {
      left: 50%;
      transform: translateX(-50%) rotate(45deg);
    }
  }

  &.bottomRight {
    transform: translateX(-100%);

    > .fx-tooltip-trip {
      right: $tooltip-padding-x;
    }
  }

  > .fx-tooltip-trip {
    width: 6px;
    height: 6px;
    border: 1px solid $tooltip-dark-background;
    background-color: $tooltip-dark-background;
    position: absolute;
    transform: rotate(45deg);
  }
}
